<template>
  <div class="app-container calendar-list-container">
    <div v-if="!opShow">
      <search :list="queryList" :queryEntity="queryEntity"></search>
      <buttons :showQuery="true" :showBack="false" @query="doQuery" :list="btnList" :disabled="disabled" placeholder="用户姓名" :permissions="permissions"></buttons>
      <grid :columns="columns" :multi="false" :url="queryUrl" ref="mainGrid" height="auto" diffHeight="105" @change="rowCilck" :queryEntity="queryEntity" :pagination="true"
        :permissions="permissions" @view="doView" @open="doOpen" @close="doClose" @password="resetPassword" @edit="doEdit" @position="doPosition"></grid>
    </div>
    <op ref="op" :visible="opShow" @cancel="cancel"></op>
    <formDialog title="职位变更" :url="changePositionUrl" ref="formDialog" :dataRule="formDataRule" :columns="formColumns" @success="doQuery"></formDialog>
  </div>
</template>

<script>
import request from '@/router/axios'
import url from '@/const/apiURL'
import grid from '@/components/Grid'
import buttons from '@/components/Buttons'
import op from './op'
import { Message, MessageBox } from 'element-ui'
import { mapGetters } from 'vuex'
import { YesOrNoFormatter } from '@/const/dict'
import search from '@/components/Search'
import { dict } from '@/const/dict'
import formDialog from '@/components/FormDialog'
import { formData } from '@/const/formData'

export default {
  components: { grid, buttons, op, search, formDialog },
  data () {
    return {
      queryUrl: url.USER_LIST_URL,
      formColumns: formData().positionChange.columns,
      formDataRule: formData().positionChange.dataRule,
      changePositionUrl: url.USER_POSITION_CHANGE_URL,
      disabled: true,
      opShow: false,
      positionCode: null,
      queryEntity: { key: 'key' },
      columns: [
        {
          label: '操作', width: 250, prop: 'op', align: 'center', template: 'op', opList: [
            { name: '编辑', clickName: 'edit', auth: 'user_edit' },
            { name: '查看', clickName: 'view', auth: 'user_view' },
            { name: '密码重置', clickName: 'password', auth: 'user_password', confirm: true },
            { name: '变更职位', clickName: 'position', auth: 'user_position' },
            { name: '开启', clickName: 'open', auth: 'user_open', confirm: true, valueProp: "status", showValue: [0] },
            { name: '关闭', clickName: 'close', auth: 'user_close', confirm: true, valueProp: "status", showValue: [1] }
          ]
        },
        { label: '用户名', width: 140, prop: 'userName', align: 'left' },
        { label: '邮箱', width: 180, prop: 'email', align: 'left' },
        { label: '部门', width: 200, prop: 'deptName', align: 'left' },
        { label: '职位', width: 120, prop: 'positionName', align: 'left' },
        { label: '手机号码', width: 120, prop: 'mobile', align: 'left' },
        { label: '是否启用', width: 80, prop: 'status', align: 'center', formatter: YesOrNoFormatter },
        { label: '创建人', width: 120, prop: 'createUserName', align: 'center' },
        { label: '创建时间', width: 100, prop: 'createTime', align: 'center' }
      ],
      btnList: [
        //  { name: '编辑', type: 'primary', icon: 'edit', click: 'edit', auth: 'user_edit', ctr: true },
        // { name: '查看', type: 'primary', icon: 'edit', click: 'view', auth: 'user_view', ctr: true },
        //  { name: '密码重置', type: 'primary', icon: 'edit', click: 'password', auth: 'user_password', ctr: true, confirm: true },
        //   { name: '变更职位', type: 'primary', icon: 'edit', click: 'position', auth: 'user_position', ctr: true },
        //   { name: '开启', type: 'primary', icon: 'edit', click: 'open', auth: 'user_open', ctr: true, confirm: true },
        //   { name: '关闭', type: 'primary', icon: 'edit', click: 'close', auth: 'user_close', ctr: true, confirm: true }
      ],
      queryList: [
        { name: '用户名', type: 'text', prop: 'userNameLike', placeholder: "用户名" },
        { name: '手机号码', type: 'text', prop: 'mobile', placeholder: "手机号码" },
        { name: '是否启用', type: 'select', prop: 'status', placeholder: "是否启用", values: dict().YesOrNo, label: 'name', value: 'value' }
      ]
    }
  },
  created () {
  },
  computed: {
    ...mapGetters([
      'permissions'
    ])
  },
  methods: {
    doView (row) {
      //const row = this.$refs['mainGrid'].getSelectOne()
      if (row) {
        this.opShow = true
        this.$refs['op'].init('查看', row, true)
      }
    },
    doEdit (row) {
      //const row = this.$refs['mainGrid'].getSelectOne()
      if (row) {
        this.viewOp(row.userCode).then(data => {
          if (data) {
            this.opShow = true
            this.$refs['op'].init('编辑', data, false, url.USER_COMAONY_EDIT_URL)
          }
        })
      }
    },
    doQuery (text) {
      this.$refs['mainGrid'].doQuery(text)
    },
    rowCilck (row) {
      this.disabled = row.length == 0
    },
    doPosition (row) {
      //const row = this.$refs['mainGrid'].getSelectOne()
      if (row) {
        this.$refs['formDialog'].show(row)
      }
    },
    cancel () {
      this.opShow = false
    },
    openOp (data) {
      return request({
        url: url.USER_OPEN_URL,
        method: 'post',
        data
      })
    },
    closeOp (data) {
      return request({
        url: url.USER_CLOSE_URL,
        method: 'post',
        data
      })
    },
    viewOp (userCode) {
      return request({
        url: url.USER_VIEW_URL,
        method: 'post',
        data: { key: 'key' },
        params: { userCode }
      })
    },
    resetOp (code) {
      return request({
        url: url.USER_PASSWORD_URL,
        method: 'post',
        data: { 'key': 'key' },
        params: { 'userCode': code }
      })
    },
    resetPassword (row) {
      // const row = this.$refs.mainGrid.getSelectOne()
      if (row) {
        this.resetOp(row.userCode).then((data) => {
          if (data) {
            MessageBox.alert("操作成功")
          }
        })
      }
    },
    doOpen (row) {
      //const row = this.$refs.mainGrid.getSelectOne()
      if (row) {
        this.openOp(row).then((data) => {
          if (data) {
            this.$refs['mainGrid'].reload()
          }
        })
      }
    },
    doClose (row) {
      // const row = this.$refs.mainGrid.getSelectOne()
      if (row) {
        this.closeOp(row).then((data) => {
          if (data) {
            this.$refs['mainGrid'].reload()
          }
        })
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
